<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_元素内容操作：元素以及元素内容的部分
		 .html()			无参---功能:获取匹配元素中第一元素的内容
							有参---功能:【设置】将匹配元素集合中所有元素替换为新元素
		特点：针对	内容 + 元素
		 .val()				无参---功能：表单内元素：input、select生效
										获取表单元素中第一个元素内容
							有参---功能：表单内元素：input、select生效
										input元素直接显示value
										select元素不是直接显示value
										option 元素中内容 用户显示
										option 元素中value值
										必须当前select中，option元素value值
										直接赋值：打印select元素对象名称[object Object]
										特点：针对	(表单内form元素可以包裹)元素的内容
		 .text()				无参---功能：获取匹配元素集合中所有元素的文本内容
							有参---功能：【设置】元素匹配集合中所有元素的文本内容替换
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<span>lorem1</span>
		<span>lorem2</span>
		<button>按钮-针对html()函数-有参</button>
		
		<h1>val()函数使用</h1>
		<button>按钮-针对val()函数-无参</button>
		<input type="text" value="文本框真实数据">
		<input type="text" placeholder="输入框显示效果[提示]">
		<!-- html：按钮  下拉列表  select>option*3 需要加value -->
		<!-- jq：  点击按钮，小盒子下拉列表的值 | html（）与val（）有参是否存在区别 -->
		<button>按钮-针对val()函数-有参</button>
		<select name="下拉" id="">
			<option value="rem1">lorem1</option>
			<option value="ren2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		<h1>text()函数使用</h1>
		<button class="btn_1">按钮-针对text()函数-无参</button>
		<button class="btn_2">按钮-针对text()函数-有参</button>
		<p>lorem4</p >
		<p>lorem5</p >
		<p>lorem6</p >
		<script>
			// 1.找到类名为btn_1的按钮--点击--弹窗内容 三个p元素内容【无参】
			$(".btn_1").click(function(){
				 var ptext=$("p").text();
				 alert(ptext);
			 });

			// 2.找到类名为btn_2的按钮--点击--lorem4、lorem5、lorem6 改为：“修改文本”【有参】
			$(".btn2").click(function(){
				$("p").text("修改文本");
						});
			// // js变量【var i=1】==jq变量		var 变量名=值、元素
			// // 无参数		html（） 函数使用
			// var html=$("span").html();
			// // BOM方式 打印数据
			// alert("无参数获取第一个元素内容："+html);
			// // 有参：点击按钮--下面两个span改为lorem和lorem
			
			// $("button").click(function(){
			// 			 $("span").html("lorem");
			// });
			
			// 动态效果：点击按钮获取第一个表单元素的内容，元素打印出来
						// $("button").click(function(){
						// 	var ins=$("input").val();
						// 	alert("val()函数无参效果:"+ins);
						// });
						
						// 
						// $("button").click(function(){
							// 设置元素的第一个值 2.直接设置下拉列表中value的值
							// $("select").val("rem1");
							// 设置元素的第一个值 2.给第一个值添加，设置的内容【本身存在】
							// var rem=$("select").val();
							// [object Object] JavaScript中，对象的默认字符串表示形态
							// select元素 对象 输出[object Object]
							// alert("val()函数有参效果:"+rem)
							//抓下拉列表的value值---select
							//object Object 测试 无参
						 // });
						 
						 
					</script>
				</body>
			</html>
	